<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../static/BOSGeo/BOSGeo.css" />
  <title>添加插值</title>
  <style>
    html {
      font-size: 12px;
    }

    html,
    body,
    #mapContainer {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }

  </style>
</head>

<body>
  <div id="mapContainer"></div>
  <script src="../../static/BOSGeo/BOSGeo.js"></script>
  <script>
    var map = new BOSGeo.Map('mapContainer', {
    mapType: BOSGeo.TDT_IMAGERY
    });
    // 获取图层管理类
    var layers = map.layers;
    // 插值面
    var interpolationCollection = new BOSGeo.LayerCollection({
        name: '插值',
        type: 'interpolation'
    });
    layers.add(interpolationCollection);
    var bounds = []; // 边界范围数据
    var interpolation;
    BOSGeo.Resource.fetchJson({
    url: '../../static/html/data/bounds.js'
    }).then(features => {
        for (var p = 0; p < features.length; p++) {
            var rings = features[p].geometry.rings
            for (var k = 0; k < rings.length; k++) {
                bounds.push(rings[k])
            }
        }

        BOSGeo.Resource.fetchJson({
            url: '../../static/html/data/data.js'
        }).then(point => {
            if (interpolation) interpolationCollection.remove(interpolation);
            interpolation = new BOSGeo.Interpolation({
                points: point,
                bounds: bounds,
                lngRange: [113.748, 114.624],
                latRange: [22.4, 22.859],
                opacity: 0.8
            })
            interpolation.addInterpolation({rangs: [113.748, 22.4, 114.624, 22.859]}); // 深圳范围内的
            interpolationCollection.add(interpolation);
            // 更新数据
            // setInterval ( () => {
            //     interpolation.setData(point, bounds);
            // }, 3000);
            // layers.remove(interpolationCollection); // 移除插值
        })
    })
    map.flyTo(114.042, 22.516, 30000, 0.6)
  </script>
</body>

</html>